<template>
  <div id="change-login-password-phone" class="stepper">
    <div class="upper">
      <div class="title">设置登录密码</div>
    </div>
    <div class="desc">为了保证账户安全，需要短信验证</div>
    <div class="input-field">
      <md-field class="phone-input">
        <md-field-item>
          <md-input-item
            name="phone"
            data-vv-name="手机号"
            ref="phoneInput"
            :value="securePhone"
            v-validate="'required|phone'"
            placeholder="请输入您的手机号"
            :maxlength="11"
            size="large"
            readonly
          ></md-input-item>
        </md-field-item>
      </md-field>
    </div>
    <md-button @click="submit">下一步</md-button>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import { Field, InputItem, FieldItem, Button, Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Loading from '@/components/loading';
import http from '@/common/http';
export default {
  name: 'change-login-password-phone',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      currentPhone: ''
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      http.post('/pakj/passenger/getUserInfo').then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          this.currentPhone = decryptByDESModeEBC(res.data.data.user_phone);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  methods: {
    submit() {
      this.$router.push({
        name: 'ChangeLoginPasswordCaptcha',
        query: {
          action: 'set'
        }
      });
    }
  },
  computed: {
    securePhone() {
      return this.currentPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  }
};
</script>
<style lang="stylus">
#change-login-password-phone {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 68px;
  }

  .goto-password {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 26px;
    font-weight: 500;
    color: rgba(255, 105, 23, 1);
    line-height: 26px;
  }

  .agreement {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    line-height: 32px;
  }

  .input-field {
    margin-bottom: 80px;
    border-bottom: 1px solid #E0E0E0;

    .left {
      margin-left: 0px !important;
    }

    .md-field-item-inner {
      padding: 0 0;
    }

    .md-field-item {
      padding: 0 0;
    }

    .md-input-item {
      padding: 0 0;

      ::-moz-placeholder {
        color: color-text-caption;
      }

      ::-webkit-input-placeholder {
        color: color-text-caption;
      }

      :-ms-input-placeholder {
        color: color-text-caption;
      }
    }
  }
}
</style>
